<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔企业微云</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        .device-list{ width: 369px; height: 381px; background: url(../customize/images/list-bg.png) no-repeat;
            transition: all 0.3s; margin-bottom: 15px; flex-basis: 20%; position: relative; }
        .device-list:hover{ background-image: url(../customize/images/list-bg-active.png); }
        .device-list .centent { width: 304px; margin: 31px auto 0; }
        .device-img-wrapper{ width: 120px; height: 76px; border: 1px solid #0096FF; transition: all 0.5s; cursor: pointer; }
        .device-img-wrapper img{ width: 100%; height: 100%;}
        .device-img-wrapper:hover{ transform: translateY(-8px); }
        .text-grey{ color: #293557; }
        a.link{ color: #87EDDF !important; position: absolute; left: 324px; bottom: 2px; line-height: 1; }
        a.link:hover{ color: #61cabc !important; }
        .btn-status{ color: #007bff; border: 1px solid transparent; }
        .btn-status:hover{ color: #fff; }
        .btn-status.active{ color: #fff; border: 1px solid #007bff; }

        .device-info-img{ width: 400px; height: 574px; border: 1px solid rgba(0, 150, 255, 0.5);}
        .device-info-img img{ max-height: 572px;}
        .w-4{ width: 4em;}
        .w-5{ width: 5em;}
        .w-6{ width: 6em;}
        .info-sec{ margin-bottom: 8px; line-height: 30px;}
        .info-name{ color: rgba(255,255,255,0.8); text-align: right;}
        .info-value{ color: #69C5E9; background: #011734; padding: 0 15px; margin-left: 15px; }
    </style>
</head>
<body>
        <div class="d-flex justify-content-between my-3">
            <form class="form-row align-items-center">
                <div class="col-auto">
                    <strong class="font-p14">排序方式：</strong>
                </div>
                <div class="col-auto">
                    <select class="form-control" id="sort_param">
                        <option value="time">生产时长</option>
                        <option value="power">能耗</option>
                        <option value="health">健康评分</option>
                        <option value="status">设备状态</option>
                    </select>
                </div>
                <div class="col-auto">
                    <select class="form-control" id="deviceType-select">

                    </select>
                </div>
                <div class="col-auto ml-4">
                    <strong class="font-p14">状态筛选：</strong>
                </div>
                <div class="col-auto" id="status_switch_wrapper">
                    <button class="btn btn-status active" type="button" onclick="rNum(0)">全部 <span id="btCount"></span>
                    </button>
                    <button class="btn btn-status" type="button" onclick="rNum(1)"><i
                            class="iconfont icon-gongzuo text-powerOn"></i> 运行中 <span id="bt1"></span></button>
                    <button class="btn btn-status" type="button" onclick="rNum(2)"><i
                            class="iconfont icon-gongzuo text-standby"></i> 空闲 <span id="bt2"></span></button>
                    <button class="btn btn-status" type="button" onclick="rNum(3)"><i
                            class="iconfont icon-gongzuo text-powerOff"></i> 离线 <span id="bt3"></span></button>
                    <button class="btn btn-status" type="button" onclick="rNum(4)"><i
                            class="iconfont icon-gongzuo text-fault"></i> 报警 <span id="bt4"></span></button>
                </div>
            </form>
            <div>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="快捷查询" id="param_id">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="button" onclick="loadDeviceListData()"><i
                                class="iconfont icon-dituyechaxun"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="d-flex flex-wrap" id="device_List">

        </div>
        <div id="page" class="page_div mt-n1"></div>
        <div class="page-decoration"></div>
        <div class="modal fade" id="viewInfoModal" data-backdrop="static" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered modal-xl">
                <div class="modal-content">
                    <div class="modal-body font-p14 d-flex">
                        <div class="device-info-img align-items-center justify-content-center d-flex">
                            <img class="img-fluid" src="../customize/images/no-photo.png" alt="" id="logo-id">
                        </div>
                        <div class="flex-1 ml-3">
                            <div class="section-title mb-3">基本信息
                                <span class="title-icon"></span>
                                <button type="button" class="close" data-dismiss="modal" style="margin-top: -5px;">
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div class="d-flex">
                                <div class="flex-1">
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">设备名称</div>
                                        <div class="flex-1 info-value" id="name-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">设备编号</div>
                                        <div class="flex-1 info-value" id="sn-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">峰值电价</div>
                                        <div class="flex-1 info-value text-peak" id="maxPrice-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">平值电价</div>
                                        <div class="flex-1 info-value text-level" id="avgPrice-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">谷值电价</div>
                                        <div class="flex-1 info-value text-valley" id="minPrice-id"></div>
                                    </div>
                                </div>
                                <div class="flex-1 ml-3">
                                    <div class="info-sec d-flex">
                                        <div class="w-6 info-name">设备类型</div>
                                        <div class="flex-1 info-value" id="deviceType"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-6 info-name">采集设备编号</div>
                                        <div class="flex-1 info-value" id="ceqNumber-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-6 info-name">站号</div>
                                        <div class="flex-1 info-value" id="port-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-6 info-name">维保周期</div>
                                        <div class="flex-1 info-value" id="maintenanceCycle-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-6 info-name">添加时间</div>
                                        <div class="flex-1 info-value" id="createTime"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="section-title mb-3 mt-3">报警阈值设置
                                <span class="title-icon"></span>
                            </div>
                            <div class="d-flex">
                                <div class="flex-1">
                                    <div class="info-sec d-flex">
                                        <div class="w-5 info-name">电压峰值</div>
                                        <div class="flex-1 info-value text-peak" id="maxU-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-5 info-name">电压标准值</div>
                                        <div class="flex-1 info-value text-level" id="standardU-id"></div>
                                    </div>
                                </div>
                                <div class="flex-1 ml-3">
                                    <div class="info-sec d-flex">
                                        <div class="w-5 info-name">电流峰值</div>
                                        <div class="flex-1 info-value text-peak" id="maxI-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-5 info-name">电流标准值</div>
                                        <div class="flex-1 info-value text-level" id="standardI-id"></div>
                                    </div>
                                </div>
                                <div class="flex-1 ml-3">
                                    <div class="info-sec d-flex">
                                        <div class="w-5 info-name">电量峰值</div>
                                        <div class="flex-1 info-value text-peak" id="maxC-id"></div>
                                    </div>
                                    <div class="info-sec d-flex">
                                        <div class="w-5 info-name">电量标准值</div>
                                        <div class="flex-1 info-value text-level" id="standardC-id"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="section-title mb-3 mt-3">标定信息
                                <span class="title-icon"></span>
                            </div>
                            <div class="d-flex">
                                <div class="flex-1">
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">额定功率</div>
                                        <div class="flex-1 info-value" id="standardPower-id"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="section-title mb-3 mt-3">工作功率阈值设置
                                <span class="title-icon"></span>
                            </div>
                            <div class="d-flex">
                                <div class="flex-1">
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">待机功耗</div>
                                        <div class="flex-1 info-value" id="qddl_id"></div>
                                    </div>
                                </div>
                               <!-- <div class="flex-1 ml-3">
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">待机电流</div>
                                        <div class="flex-1 info-value" id="djdl_id"></div>
                                    </div>
                                </div>-->
                                <div class="flex-1 ml-3">
                                    <div class="info-sec d-flex">
                                        <div class="w-4 info-name">电流比</div>
                                        <div class="flex-1 info-value" id="dlb"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../plugins/echarts.min.js"></script>
<script src="../plugins/paging.js"></script>
<script src="../plugins/ImgLoading.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script src="../customize/js/customModalV2.js"></script>
<script src="../plugins/jquery.cookie.js"></script>
<script src="../customize/js/deviceList.js"></script>

</body>
</html>